<template>
    <div v-if="!!data?.length" class="goodsList">
        <div v-for="item in props.data" :key="item.id" class="goodsItem">
            <div class="goodsImg">
                <el-image
                    :v-if="item?.cover"
                    :src="item.cover"
                    :preview-src-list="[item.cover]"
                    :preview-teleported="true"
                    fit="cover" />
            </div>
            <el-tooltip class="box-item" :disabled="disabled" :content="item?.product_name" placement="top-start">
                <div class="goodsName" @mouseenter="handleMouse($event)">
                    {{ item.product_name }}
                </div>
            </el-tooltip>
            <div class="goodsPrice">{{ filterPrice(item) }}</div>
            <div class="check">
                <el-popover
                    v-if="item.source == 9"
                    placement="top"
                    :width="210"
                    effect="dark"
                    trigger="hover"
                    content="视频号小店商品暂不支持分享">
                    <template #reference>
                        <el-checkbox
                            v-model="item.isCheck"
                            :disabled="true"
                            @change="changeMaterial(item)"></el-checkbox>
                    </template>
                </el-popover>
                <el-checkbox
                    v-else
                    v-model="item.isCheck"
                    :disabled="item.disabled"
                    @change="changeMaterial(item)"></el-checkbox>
            </div>
        </div>
    </div>
    <div v-else class="empty-box">
        <Empty />
    </div>
</template>

<script setup lang="ts">
import Empty from '../components/Empty.vue';
import { ref, reactive, computed, withDefaults, onMounted } from 'vue';
import { ElMessage } from 'element-plus';

import { isTextBeyond } from '../../utils/index';

interface Props {
    /** 选中数据 */
    modelValue: Array<any>;
    /** table数据 */
    data: Array<any>;
    /** 是否多选 */
    multiple?: boolean;
    /** 选中素材总数 */
    selectTotalNum: number;
    /** 剩余可选中数量 */
    remainNum: number;
    // infinite
}

const props = withDefaults(defineProps<Props>(), {
    modelValue: () => [],
    data: () => [],
    remainNum: 0,
    multiple: true,
    selectTotalNum: 9
});

const emit = defineEmits(['update:modelValue']);

const selectList = computed({
    get() {
        return props.modelValue;
    },
    set(val) {
        emit('update:modelValue', val);
    }
});

const disabled = ref(true);
/**
 * 鼠标移动是否展示tooltips
 * @param e
 */
const handleMouse = e => {
    disabled.value = isTextBeyond(e);
};

/**
 * 选中/取消
 * @param item
 */
const changeMaterial = (item: any) => {
    const index = selectList.value.findIndex(el => el.id == item.id);

    if (props.remainNum <= 0 && index == -1) {
        ElMessage.error(`最多可选${props.selectTotalNum}个素材`);
        return;
    }
    if (props.multiple) {
        if (index == -1) {
            selectList.value.push({ ...item, sortTime: +new Date() });
        } else {
            selectList.value.splice(index, 1);
        }
    } else {
        selectList.value.splice(0);
        selectList.value.push({ ...item, sortTime: +new Date() });
    }
};

const filterPrice = item => {
    const { min_price, min_original_price, max_price, max_original_price } = item;
    if (
        Number(min_price) == Number(min_original_price) &&
        Number(min_original_price) == Number(max_price) &&
        Number(max_price) == Number(max_original_price)
    ) {
        return Number(min_price);
    } else {
        const min = Number(min_price) > Number(min_original_price) ? min_original_price : min_price;
        const max = Number(max_price) > Number(max_original_price) ? max_price : max_original_price;
        return `${min} ~ ${max}`;
    }
};

onMounted(() => {});
</script>

<style lang="scss" scoped>
.goodsList {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

    .goodsItem {
        position: relative;
        flex-basis: 23.1%;
        margin-right: 12px;
        margin-bottom: 12px;
        border-radius: 6px;
        border: 1px solid #eee;

        &:nth-of-type(4n) {
            margin-right: 0;
        }

        &:hover {
            box-shadow: 0 0 10px #eee;
            cursor: pointer;
        }

        .goodsImg {
            width: 100%;
            height: 120px;

            .el-image {
                width: 100%;
                height: 100%;

                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .goodsName {
            min-width: 0;
            width: 100%;
            max-width: 140px;
            padding: 4px;
            box-sizing: border-box;
            line-height: 1.2;
            color: #444;
            font-size: 12px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .goodsPrice {
            padding: 0 4px 8px;
            line-height: 1;
            font-size: 12px;
            color: #666;
        }

        .check {
            position: absolute;
            left: 10px;
            top: 0;
        }
    }
}

.empty-box {
    width: 100%;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
